<template>
  <div class="app-container">
    <el-form ref="form" :model="form">
      <el-divider content-position="left"><h3>SaaS配置</h3></el-divider>
      <el-form-item label="站点类型" :label-width="width" style="width: 600px">
        <el-select v-model="form.saas.sitetype" placeholder="请选择站点类型">
          <el-option
                  v-for="item in sitetypeoptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="应用市场服务地址" :label-width="width">
        <el-input v-model="form.appstoreserver.host" placeholder="应用市场服务地址" autocomplete="off" clearable />
      </el-form-item>
      <el-form-item label="应用市场帐号" :label-width="width">
        <el-input v-model="form.appstoreserver.account" placeholder="应用市场帐号" autocomplete="off" clearable />
      </el-form-item>
      <el-form-item style="margin: auto">
        <el-button type="primary" @click="submit">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'saas',
  data() {
    return {
      width: '180px',
      form: {
        saas: {
          sitetype: '',
        },
        appstoreserver: {
          host: '',
          account: '',
        },
        parent: 'saas'
      },
      sitetypeoptions:[
        {
          label: '租户',
          value: 'tenant'
        },
        {
          label: '运营平台',
          value: 'server'
        }
      ],
      rules: {
      }
    }
  },
  created() {
    this.$http.get('/config/saas').then(response => {
      const wechat = response.data
      Object.keys(wechat).forEach(k => {
        Object.keys(wechat[k]).forEach(key => {
          if (key === 'is_cname') {
            this.form[k][key] = parseInt(wechat[k][key])
          } else if (key === 'read_from_cdn') {
            this.form[k][key] = parseInt(wechat[k][key])
          } else {
            this.form[k][key] = wechat[k][key]
          }
        })
      })
    })
  },
  methods: {
    submit() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          this.$http.post('config', this.form).then(response => {
            this.$message.success(response.message)
          })
        } else {
          console.log(valid)
        }
      })
    }
  }
}
</script>

<style scoped>
  .el-form .el-form-item {
    width: 600px;
  }
</style>
